*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
@font-face {
    font-family: electronicFont;
    src: url(../font/DS-DIGIT.TTF);
}
ul{
    list-style: none;
}
body{
    background: url(../images/bg.jpg) no-repeat
    top center;
    line-height:1.15;
}
header{
    height: 1.25rem;
    background: url(../images/head_bg.png) no-repeat;
    background-size: 100% 100%;
    h1{
        font-size: .475rem;
        color: #fff;
        line-height: 1rem;
        text-align: center;
    }
    .showTime{
        position: absolute;
        top:0rem;
        right: .375rem;
        line-height: .9375rem;
        font-size: .25rem;
        color:rgba(255, 255, 255, 0.7)  ;
    } 
}
.mainbox{
    display: flex;
    min-width: 1024px;
    max-width: 1920px;
    margin: 0 auto;
    padding: .125rem .125rem 0 ;
    .column{
        flex: 3;
        overflow: hidden;
    }
    .column:nth-child(2){
        flex: 5;
        margin: 0 .125rem .1875rem;
    }
   .panle{
       position: relative;
       height: 3.875rem;
       border:1px solid rgba(25, 186, 139, 0.17);
       background: url(../images/line\(1\).png);
       padding:  0 .1875rem .5rem;
       margin-bottom: .1875rem;
       &::before{
           position: absolute;
           top:0px;
           left: 0px;
           content: '';
           width: .125rem;
           height: .125rem;
           border-top: 2px solid #02a6b5;
           border-left: 2px solid #02a6b5;
       };
       &::after{
        position: absolute;
        top:0px;
        right: 0px;
        content: '';
        width: .125rem;
        height: .125rem;
        border-top: 2px solid #02a6b5;
        border-right: 2px solid #02a6b5;
      }
      .panle-footer{
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        &::before{
         position: absolute;
         bottom:0px;
         left: 0px;
         content: '';
         width: 10px;

         height: 10px;
         border-left: 2px solid #02a6b5;
         border-bottom: 2px solid #02a6b5;
        };
        &::after{
         position: absolute;
         bottom:0px;
         right: 0px;
         content: '';
         width: .125rem;
         height: .125rem;
         border-bottom: 2px solid #02a6b5;
         border-right: 2px solid #02a6b5;
       }
    }
  };
  h2{
      height: .6rem;
      color: #fff;
      line-height: .6rem;
      text-align: center;
      font-size: .25rem;
      font-weight: 400;
      a{
          text-decoration: none;
          color: #fff;
          margin:0 .125rem;
      }
  }
   .chart{
     height: 3rem;
    //  background-color: pink
   }   
   .no{
       background-color: rgba(101, 132, 226, 0.1);
       padding: .1875rem;
       .no-hd{
           border: 1px solid rgba(25, 186, 139, 0.17) ;
          ul{
              display: flex;
              position: relative;
              li{
                  position: relative;
                  flex: 1;
                  height: 1rem;
                  font-size: .875rem;
                  color: #ffeb7b;
                  line-height: 1rem;
                  text-align: center;
                  font-family:electronicFont;                  
                  &::after{
                      content:" ";
                      position: absolute;
                      top:25%;
                      right: 0;
                      height: 50%;
                      width: .0125rem;
                      background-color:rgba(255, 255, 255, 0.2) ;
                  }
                 }
              &::before{
                  position: absolute;
                  content: " ";
                  top:0;
                  left: 0;
                  width: .375rem;
                  height: .125rem;
                  border-top: 2px solid #02a6b5;
                  border-left: 2px solid #02a6b5;
              }
              &::after{
                  position: absolute;
                  content: " ";
                  bottom:0;
                  right: 0;
                  width: .375rem;
                  height: .125rem;
                  border-right: 2px solid #02a6b5;
                  border-bottom: 2px solid #02a6b5;
              }

             }
        }
        .no-bd{
            ul{
                display: flex;
                li{
                    flex: 1;
                    height: .5rem;
                    color: rgba(255, 255, 255, 0.7);
                    font-size: .225rem;
                    text-align: center;
                    padding: .125rem 0 0;
                }
            }
        }
   }
   .map{
       position: relative;
        height: 10.125rem;
        .map1{
            width: 6.475rem;
            height: 6.475rem;
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background: url(../images/map.png);
            opacity: 0.3;
            background-size: 100% 100%;
        }
        .map2{
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 8.0375rem;
            height: 8.0375rem;
            background: url(../images/lbx.png);
            background-size: 100% 100%;
            opacity: 0.6;
            animation: rotate1 15s linear infinite ;
        }
        .map3{
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 7.075rem;
            height: 7.075rem;
            background: url(../images/jt.png);
            background-size: 100% 100%;
            opacity: 0.6;
            animation: rotate2 8s linear infinite ;
        }
        .map-chart{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 10.125rem;
            // background-color: black;
        }
        @keyframes rotate1 {
            from{
                transform: translate(-50%,-50%) rotate(0deg);
            }
            to{
                transform: translate(-50%,-50%) rotate(360deg);
            }
        }
        @keyframes rotate2 {
            from{
                transform: translate(-50%,-50%) rotate(0deg);
            }
            to{
                transform: translate(-50%,-50%) rotate(-360deg);
            }
        }
   }
}